<template>
	<view class="spoken-topic">
		<div class="title-line">
			<div class="addLine" v-if="topicType">{{ topicType }}</div>
		</div>
		<div class="question-list" v-for="(item, index) in dataList" :key="index">
			<div v-if="item.topicList.length > 0" class="title">{{ item.partName }}</div>
			<div class="question-cont">
				<div
					class="question-item"
					v-for="(sub, ind) in item.topicList"
					:key="ind"
					@click="startExam(sub)"
				>
					<div class="cont-text">
						<text v-if="item.topicList.length > 1">{{ ind + 1 }}.</text>
						{{ sub.topicName | formatString }}
					</div>
					<div><uni-icons type="right" size="14" color="#CCCCCC"></uni-icons></div>
				</div>
			</div>
		</div>
		<!-- <div class="question-list">
            <div class="title">Part 2</div>
            <div class="question-cont">
                <div class="question-item">
                    <div>1. When do you think children start to have.</div>
                    <div><uni-icons type="right" size="14" color="#CCCCCC"></uni-icons></div>
                </div>
                <div class="question-item">
                    <div>1. When do you think children start to have.</div>
                    <div><uni-icons type="right" size="14" color="#CCCCCC"></uni-icons></div>
                </div>
                <div class="question-item">
                    <div>1. When do you think children start to have.</div>
                    <div><uni-icons type="right" size="14" color="#CCCCCC"></uni-icons></div>
                </div>
            </div>
        </div> -->
	</view>
</template>

<script>
import { apiSpokenTopicList } from '@/api/exam/exam.js'
export default {
	data() {
		return {
			dataList: [],
			topicType: ''
		}
	},
	onLoad(options) {
		this.timeStr = options.timeStr
		this.topicType = decodeURIComponent(options.topicType)
		this.topicSeries = options.topicSeries

		this.getList()
	},
	filters: {
		formatString(str) {
			const name = str.split('<br')
			console.log(name)
			return name[0]
		}
	},
	methods: {
		getList() {
			apiSpokenTopicList({
				timeStr: this.timeStr,
				topicType: this.topicType,
				topicSeries: this.topicSeries
			}).then((res) => {
				this.topicType = res.data.topicType
				this.dataList = res.data.partList
				const list = res.data.partList.length && res.data.partList.map(item => {
					return item.topicList
				}).flat() || []
				list.forEach((item, index)  => {
					item.tabSort = index
				})
				this.dataList.forEach(item => {
					item.topicList.forEach(sub => {
						const data = list.find(i => i.id == sub.id) || ''
						if(data){
							sub.tabSort = data.tabSort
						}
					})
				})
			})
		},
		startExam(sub) {
			const timeStr = sub.time
			const topicType = sub.topicType
			const topicSeries = sub.topicSeries
			const partType = 2
			uni.navigateTo({
				url:
					'/pages/exam/spokenExam?timeStr=' +
					timeStr +
					'&topicType=' +
					encodeURIComponent(topicType) +
					'&topicSeries=' +
					topicSeries +
					'&partType=' +
					partType +
					'&index=' +
					sub.tabSort
			})
		}
	}
}
</script>
<style>
page {
	background-color: #f6f8fc;
}
</style>
<style scoped lang="scss">
@function torem($rpx) {
	//$rpx为需要转换的字号
	@return #{$rpx * 100 / 750 / 4}rem;
}
.spoken-topic {
	padding: torem(30);
}
.title-line {
	position: relative;
	display: inline-block;
	.addLine {
		font-weight: 500;
		font-size: torem(32);
		color: #333333;
		&::after {
			position: absolute;
			content: '';
			bottom: 0;
			left: 0;
			top: torem(31);
			width: 100%;
			height: torem(8);
			background: rgba(253, 69, 61, 0.35);
			opacity: 0.7;
			z-index: -1;
		}
	}
}
.question-list {
	.title {
		font-size: torem(28);
		font-weight: 400;
		color: #999999;
		padding: torem(16) 0;
	}
	.question-cont {
		padding: 0 torem(20);
		font-size: torem(28);
		font-weight: 400;
		color: #333333;
		background-color: #ffffff;
		border-radius: torem(10);
		.question-item {
			height: torem(90);
			line-height: torem(90);
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #f5f5f5;
		}
		.question-item:last-child {
			border: none;
		}
	}
}
.cont-text {
	font-size: torem(28);
	font-weight: 400;
	color: #333333;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
</style>
